<template>
  <div>
    <van-sticky>
      <div class="navbar">
        <van-icon class="navcross" name="arrow-left" @click="goBack" />
        <span class="nav-title">严选商城</span>
      </div>
    </van-sticky>
    <van-tabs @click="cut" v-model="active">
      <van-tab
        v-for="item in brotherCategory"
        :title="item.name"
        :key="item.id"
      ></van-tab>
    </van-tabs>

    <div class="title_desc">
      <h2>{{ name }}</h2>
      <p>{{ frontDesc }}</p>
    </div>
    <Product :GoodList="goodsList" />
  </div>
</template>

<script>
import Product from "./Home/Product.vue";
export default {
  name: "Chanidnel",
  components: { Product },
  data() {
    return {
      brotherCategory: [],
      page: 1,
      size: 1000,
      currentCategory: {},
      goodsList: [],
      id: "",
      name: "",
      frontDesc: "",
      active: 0,
    };
  },
  mounted() {
    this.$http.get("http://localhost:8080/api/getDB").then((res) => {
      this.brotherCategory = res.data.categoryList;
      let id = this.$route.params.id;
      this.brotherCategory.forEach((item, index) => {
        if (Number(item.id) == Number(id)) {
          this.active = index;
          this.name = item.name;
          this.goodsList = item.goodsList;
        }
      });
    });
  },
  methods: {
    cut() {
      this.goodsList = this.brotherCategory[this.active].goodsList;
      this.name = this.brotherCategory[this.active].name;
    },
    goBack() {
      this.$router.push("/home");
    },
  },
};
</script>

<style lang = "less" scoped>
.navbar {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  height: 0.45rem;
  line-height: 0.45rem;
}
.navcross {
  position: absolute;
  padding-left: 0.2rem;
  margin-top: 0.13rem;
  color: darkred;
  font-size: 0.2rem;
}
.nav-title {
  display: block;
  font-size: 0.18rem;
  text-align: center;
}

.title_desc {
  text-align: center;
  background: #fff;
  h2 {
    font-size: 18px;
    height: 50px;
    line-height: 50px;
  }
  p {
    height: 30px;
    line-height: 30px;
    color: #666;
  }
}
</style>